var tgd = tgd || {};
tgd.Services = tgd.Services || {};
tgd.Services.USNO = tgd.Services.USNO || {};
tgd.Services.USNO.Views = tgd.Services.USNO.Views || {};

/*
 * data - tgd.Services.USNO.SunriseSunset.getData()
 * canvas - HTML element (most likely <div>)
 */
tgd.Services.USNO.Views.DaylightSavingsTime = function (data, canvas) {
	this._data = data;
	this._canvas = canvas;
	
	var DAY_PIXEL_WIDTH = 2;
	var VIEW_PIXEL_HEIGHT = 750;

	this._canvas.style.height = VIEW_PIXEL_HEIGHT.toString() + "px";
	this._canvas.style.width = (365 * DAY_PIXEL_WIDTH).toString() + "px";  //todo: calc #days in year

	for (var i = 0; i < 12; ++i) {
		var monthDiv = document.createElement("div");
		monthDiv.style.height = "100%";
		monthDiv.style.width = (this._data.Months[i].Days.length * DAY_PIXEL_WIDTH).toString() + "px";
		monthDiv.style.backgroundColor = (i % 2 == 0 ? "#000" : "#333");
		monthDiv.title = this._data.Months[i].Name;

		monthDiv.setAttribute("style", "float:left;");
		monthDiv.style.styleFloat = "left";  //worthless IE

		for (var j = 0; j < this._data.Months[i].Days.length; ++j) {
			var dayDiv = document.createElement("div");

			dayDiv.style.height = this._data.Months[i].Days[j].SunlightPercentage.toString() + "%";
			dayDiv.style.width = DAY_PIXEL_WIDTH.toString() + "px";
			dayDiv.style.backgroundColor = "Yellow";
			dayDiv.style.marginTop = ((this._data.Months[i].Days[j].Sunrise.Hour + this._data.Months[i].Days[j].Sunrise.Minute / 60) / 24 * VIEW_PIXEL_HEIGHT) + "px";

			dayDiv.setAttribute("style", "float:left;");
			dayDiv.style.styleFloat = "left";  //worthless IE

			monthDiv.appendChild(dayDiv);
		}

		this._canvas.appendChild(monthDiv);
	}
}